<template>
    <div class="ranklist">
        <div class="container">
            <div class="title">
                <h3>排行榜</h3>
            </div>
            <div class="ranklist-item">
                <el-table :data="rankdata.ranks" border stripe height="600">
                    <el-table-column prop="examUser.nickName" label="姓名" width="200"></el-table-column>
                    <el-table-column prop="logicScore" label="分数" width="100"></el-table-column>
                    <el-table-column prop="duration" label="用时" width="100"></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from "vue-router"
import message_notice from "../functional/message_notice";
import { useUrlStore } from "../stores/urlStore";

interface examUser {
    userId: number,
    userName: string,
    nickName: string,
    email: string,
    sex: string,
    avatar: string
}

interface Ranks {
    recordId: number,
    examUserId: number,
    examStartTime: string,
    duration: number,
    logicScore: number,
    totalScore: number,
    examUser: examUser,
}

let rankdata = reactive({
    ranks: [] as Ranks[]
})

const urlStore = useUrlStore()
const router = useRouter()


const fetchRankData = async (examID: any) => {
    try {
        let token: any = sessionStorage.getItem("token")
        let res = await fetch(`${urlStore.baseurl}/record/getRecordListByExamID?examID=${examID}`, {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
                "token": token
            }
        })
        let data = await res.json()
        if (data.code === 200) {
            rankdata.ranks = data.data
        }
    } catch (error) {
        message_notice("获取排行榜数据失败,或者请等到答题结束后再看排名", "error")
        router.push("/index/examResult")
    }
}

onMounted(() => {
    const route = useRoute()
    const examID: any = route.params.examId

    fetchRankData(examID)

    setTimeout(() => {
        //对rankData进行排序
        rankdata.ranks.sort((a, b) => b.logicScore - a.logicScore)
        //对排好序的rankData添加index属性   index从1开始 对应排名
        let index = 1
        rankdata.ranks = rankdata.ranks.map(rank => ({
            ...rank,
            rank: index++
        }))
        console.log(rankdata.ranks);
    }, 150)
})

</script>


<style scoped lang="scss">
.ranklist {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    width: 100%;

    .container {
        height: 100%;
        width: 75%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .title {
            height: 50px;
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 5px;
            margin-bottom: 5px;
        }

        .ranklist-item {
            min-width: 0px;
            min-height: 0px;
        }
    }
}
</style>